<template>
  <scroll-view scroll-y class="slider-container">
    <view
      :class="{ 'selected-item': index == props.selectIndex }"
      @click="itemAction(index)"
      v-for="(item, index) in props.categoryList"
      :key="item.id"
      class="slider-item"
    >
      <text :class="{ selected: index == props.selectIndex }" class="title">{{ item.name }}</text>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
const emit = defineEmits(['itemTap'])
const props = defineProps({
  categoryList: {
    type: Array,
    default: () => []
  },
  selectIndex: {
    type: Number,
    default: 0
  }
})

const itemAction = (index: number) => {
  emit('itemTap', index)
}
</script>

<style lang="scss" scoped>
.slider-container {
  height: 100%;
  width: 100%;

  .slider-item {
    height: 48px;
    background-color: #ededed;
    display: flex;
    justify-content: center;
    align-items: center;

    .title {
      font-size: 24upx;
      color: #666;
    }

    .selected {
      color: #a85ee7;
      font-weight: 600;
    }
  }

  .selected-item {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 25upx;
      bottom: 25upx;
      left: 0;
      width: 5upx;
      background-color: #a85ee7;
    }
  }
}
</style>
